
<style lang="scss" scoped>
	.seckill-timelist {
		color: #E0DFDF;
		background:linear-gradient(45deg,rgba(255,109,81,1) 1%,$uni-color-primary 100%);
		.item {
			margin-top: 30px;
			margin-left: 15px;
			width: 80px;
			height: 85px;
			text-align: center;
			.time {
				font-size: 15px;
				height: 24px;
			}
			.label {
				width: 50px;
				font-size: 11px;
			}
			&.current {
				color: #fff;
				.time {
					font-size: 18px;
				}
				.label {
					font-size: 12px;
				}
			}
		}
	}
	.item-list {
		margin-top: -10px;
		border-radius: 10px;
		/deep/ .xy-list-item {
			.left {
				.image {
					height: 100px;
					margin-right: 20px;
				}
			}
			.content {
				padding-top: 6px;
				.title {
					.left uni-text {
						font-size: 14px !important;
						line-height:18px;
					}
				}
				.info {
					.uni-progress-info {
						margin-left: 10px;
						font-size: 13px;
					}
					.uni-progress {
						width: 130px;
						margin-top: 5px;
					}
					.uni-progress-bar {
						border-radius: 10px;
						overflow: hidden;
						.uni-progress-inner-bar {
							background:linear-gradient(135deg,rgba(255,204,0,1) 0%,rgba(255,120,0,1) 98%) !important;
						}
					}
				}
				.info .subtitle {
					height: 40px;
					font-size: 12px;
				}
				.seckill-now {
					margin-top: 35px;
				}
			}
		}
	}
</style>

<template>
	<view>
		<view class="seckill-timelist">
			<scroll-view 
				scroll-x="true"
				:show-scrollbar="false"
				scroll-into-view="currentItem">
				<view class="flex">
					<view @click="switchTime(item)" :id="item == seckillCurrentHour ? 'currentItem': ''" class="item" :class="item == seckillCurrentHour ? 'current': ''"
						:key="index" v-for="(item,index) in timeList">
						<view class="time">
							{{item}}
						</view>
						<view class="label">
							<text v-if="compareDate(seckillCurrentHour, item)">
								已开始
							</text>
							<text v-else-if="compareDate(item, seckillCurrentHour)">
								即将开始
							</text>
							<text v-else>
								进行中
								<view class="countdown">
								</view>
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="item-list p-t-sm bg-white">
			<xy-list-item
				:key="item.id"
				v-for="item in dataList"
				type="media"
				:image="item.cover"
				:title="item.title"
				contentStyle="align-self: flex-start"
				titleFs="15px">
				<template slot="tag">
					<!-- <xy-tag class="pos-a" style="top: 2px;left: 1px;transform: scale(0.8);"
						type="translucent" size="small" shape="square" :plain="false">
						NO.{{item.id}}
					</xy-tag> -->
				</template>
				<view slot="titleRight">
				</view>
				<template slot="info">
					<view class="left p-t-xs text-gray">
						<view class="subtitle m-b-xs">
							{{item.subtitle}}
							<progress stroke-width="10" activeColor="red" :percent="item.progress" show-info />
						</view>
						<view class="price">
							<view class="font-default text-primary">
								¥<text class="text-primary">&nbsp;&nbsp;{{item.curPrice}}</text>
								<text class="m-l-sm text-gray font-sm" style="text-decoration:line-through">¥{{item.price}}</text>
							</view>
						</view>
					</view>
					<view class="right p-t-xs font-sm text-gray">
						<navigator v-if="item.curStock > 0" :url="'/pages/ishop/item/info?id=' + item.itemId + '&promoteType=1&promoteId=' + item.id">
							<xy-tag type="primary" class="seckill-now">立即抢</xy-tag>
						</navigator>
						<xy-tag v-else type="gray" class="seckill-now">已抢光</xy-tag>
					</view>
				</template>
			</xy-list-item>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seckillCurrentDate: '',
				seckillCurrentHour: '',
				seckillLeftSeconds: 0,
				dataList: [],
				dataPage: {
					totalCount: 0,
					limit: 10,
					page: 1
				},
				loadingType: 'more', //加载更多状态
				timeList: [
					'08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','00:00',
				]
			}
		},
		onLoad() {
		},
		onShow() {
			var myDate = new Date();
			this.seckillCurrentDate = this.util.formatDate(myDate, 'yyyy-MM-dd hh:mm');
			let seckillCurrentHour = myDate.getHours() + ':00';
			if (seckillCurrentHour != this.seckillCurrentHour) {
				this.seckillCurrentHour = seckillCurrentHour;
				this.seckillLeftSeconds = 3600 - myDate.getMinutes() * 60 - myDate.getSeconds() - 1;
				this.loadData();
			}
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
			uni.stopPullDownRefresh();
		},
		// 加载更多
		onReachBottom(){
			if (this.loadingType != 'nomore') {
				if (this.dataPage.totalCount == this.dataList.length()) {
					this.loadingType = 'nomore';
				} else {
					this.page += 1;
					this.loadingType = 'loading';
					this.loadData();
				}
			}
		},
		methods: {
			switchTime(time){
				this.seckillCurrentHour = time;
				this.loadData('refresh');
			},
			compareDate(t1,t2) {
				var date = new Date();
				var a = t1.split(":");
				var b = t2.split(":");
				return date.setHours(a[0],a[1]) > date.setHours(b[0],b[1]);
			},
			async loadData(type){
				if (type == 'refresh') {
					this.dataPage.page = 1;
				}
				// 获取当前场次的秒杀列表
				let res = await this.util.request({
					url: '/v1/ishop_seckill/seckill/lists',
					data: {
						page: this.dataPage.page,
						limit: this.dataPage.limit,
						datetime: this.seckillCurrentDate,
					},
					method: 'get'
				});
				if (res.code == 200) {
					if (type == 'refresh') {
						this.dataList = res.data.dataList;
					} else {
						this.dataList = this.dataList.concat(res.data.dataList);
					}
					if (this.dataPage.totalCount == this.dataList.length) {
						this.loadingType = 'nomore';
					}
				} else {
					this.util.showToast({
						title: res.msg,
						icon: 'loading',
						duration: 2000
					});
				}
			}
		}
	}
</script>
